import { Menu, SwitchButton, User, UserFilled } from "@element-plus/icons"
import Icon from '@/components/icon/icon.vue'
import { useAuthUserStore } from "@/stores/authuserStore"
import { reactive } from "vue"
import DialogForm from '@/components/form/form.vue';
import api from '@/api'
import { ElNotification } from "element-plus";
import { useWebsocketStore } from "@/stores/websocketStore";

const authUserStore = useAuthUserStore()
const websocketStore = useWebsocketStore()

const _cacheState = reactive({
  changePwdShow: false,
  form: {
    old_password: '',
    new_password: '',
  }
})

export default (props: any) => {

  return <el-drawer
    v-model={props.userinfoShow}
    title='用户中心'
    direction='rtl'
    append-to-body={true}
    size={400}
    modal={true}
    beforeClose={() => { props.setUserinfoShow(false) }}
    v-slots={{
      'footer': () => <FooterSlots item={props} />
    }}
  >
    <div class='user-tab'>
      <div class='item-tab'>
        <div class='title'> 用户名：</div>
        <div class='value'>{authUserStore.name}</div>
      </div>
      <div class='item-tab'>
        <div class='title'>账号：</div>
        <div class='value'>{authUserStore.username}</div>
      </div>
      <div class='item-tab'>
        <div class='title'> 员工编号：</div>
        <div class='value'>{authUserStore.no || '暂无'}</div>
      </div>
      <div class='item-tab'>
        <div class='title'> 手机号：</div>
        <div class='value'>{authUserStore.phone}</div>
      </div>
      <div class='item-tab'>
        <div class='title'> 邮箱：</div>
        <div class='value'>{authUserStore.email || '暂未绑定邮箱'}</div>
      </div>
      <div class='item-tab'>
        <div class='title'> 部门名称：</div>
        <div class='value'>{authUserStore.organization_name || '暂无部门'}</div>
      </div>
      <div class='item-tab'>
        <div class='title'> 部门编号：</div>
        <div class='value'>{authUserStore.organization_no || '暂无'}</div>
      </div>
      <div class='item-tab'>
        <div class='title'> 角色：</div>
        <div class='value'>{authUserStore.role_name || '暂无'}</div>
      </div>
      <div class='item-tab'>
        <div class='title'> 状态：</div>
        <div class='value'> <div class='i-dot i-success'></div> 在职</div>
      </div>
    </div>
    <DialogForm width={600} show={_cacheState.changePwdShow} form={_cacheState.form} title="修改密码" beforeClose={() => { _cacheState.changePwdShow = false }} formFn={formFn} onSubmitClick={changPwdSubmit} />
  </el-drawer>
}


const formFn: IPopup.IFormFn[] = reactive([
  {
    key: 'old_password',
    type: 'input',
    label: '旧密码',
    placeholder: '请输入旧密码',
    rules: [{ required: true, message: '请输入旧密码' }]
  },
  {
    key: 'new_password',
    type: 'password',
    label: '新密码',
    placeholder: '请输入新密码',
    rules: [{ required: true, message: '请输入新密码' }]
  },
])

const changPwdSubmit = (closeLoading: any) => {
  api.ChangePassword(_cacheState.form).then((res: any) => {
    closeLoading();
    if (!res.ResponseError) {
      _cacheState.changePwdShow = false
      ElNotification({ title: '修改成功', type: 'success' })
    }
  })
}


const logoutClick = (props: any) => {
  authUserStore.clearUser()
  authUserStore.toLogin()
  websocketStore.close()
  props.setUserinfoShow(false)
}


const changePwd = () => {
  _cacheState.changePwdShow = true
}


const FooterSlots = (_props: any) => <div class='user-footer'>
  <el-button type='primary' onClick={changePwd} > <Icon class='i-mright9' name='reset' height={16} color='#fff' /> 修改密码</el-button>
  <el-button type='primary' onClick={() => { logoutClick(_props.item) }}> <Icon class='i-mright9' name='logout' height={14} color='#fff' /> 退出登录</el-button>
</div>